<template>
    <div class="root">
        <div class="return-wrapper">
            <div class="return-icon" @click="returnLast">
                <van-icon name="arrow-left" color="white" size="28px"/>
            </div>
        </div>
        <div class="activity-list-top">
            <div class="my-activity" @click="changeTop(1)"><!-- 当前不选择的设置透明度为0.7,下划线设置为display:none -->
                <span>我参与的</span>
            </div>
            <div class="all-activity" @click="changeTop(2)">
                <span>全部活动</span>
            </div>
            <div class="decoration-line"></div>
        </div>
        <div class="activity-list">
            <van-empty class="empty-image" description="还没有参加过活动哟，快去参加活动吧!" v-show="activityList.length == 0 && nowLeft == '1.25333rem'"/>
            <van-empty class="empty-image" description="目前无活动开放哟~" v-show="activityList.length == 0 && nowLeft == '4.64rem'"/>
            <div class="activity-cell" v-for="a in activityList" @click="publicCapsual.poolId = a.id,goIntoPool(a.state,Number(a.participated))" v-show="!(a.state === 3)">
                <div class="cell-top">
                    <div class="cell-title">
                        <span>{{ a.title }}</span>
                    </div>
                    <div class="cell-tag">
                        <van-tag round type="primary" v-show="a.state==0" color="#ead72f" size="large">未开始</van-tag>
                        <van-tag round type="primary" v-show="a.state==1" color="#4fc558" size="large">进行中</van-tag>
                        <van-tag round type="primary" v-show="a.state==2" color="#6969bd" size="large">已关闭</van-tag>
                        <van-tag round type="primary" v-show="a.state==4" color="#bbbbbb" size="large">已结束</van-tag>
                    </div>
                </div>
                <div class="cell-middle">
                    <div class="cell-participated">
                        <span>{{ a.number }}人参与了活动</span>
                    </div>
                </div>
                <div class="cell-bottom">
                    <div class="cell-time">
                        <span>{{ a.startTime }} -- {{ a.endTime }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref,onMounted,reactive,watch } from 'vue';
import { getAllPoolInfo } from '../request/api';
import { useRouter } from "vue-router";
import { useGlobalData } from '../store/index'
import { ElLoading } from 'element-plus';

interface PoolInfo{
    type: string,  //all,open,close,end,delete
}
interface ActivityList{
    id: string,
    title: string,
    content: string,
    state: number,
    participated: string,
    startTime: string,
    endTime: string,
    openTime: string,
    number: number,
    picture: null,
}
interface PublicCapsual{
    poolId: string,
    pageSize: number,
    pageNum: number,
    order: string,   //1是正序，0是逆序
    type:string, //hot是按热度排序，time是按时间排序
}
interface Options {
    lock: boolean,
    text: string,
    background: string,
}
const options: Options = {
    lock: true,
    text: "Loading...",
    background: 'rgba(0,0,0,0.7)'
}
const GlobalData = useGlobalData();
const router = useRouter();
var nowLeft = ref<string>("1.25333rem");
var poolInfo = reactive<PoolInfo>({type: 'all'});
var activityList = reactive<ActivityList[]>([]);
var leftList = reactive<ActivityList[]>([]);
var rightList = reactive<ActivityList[]>([]);
var publicCapsual = reactive<PublicCapsual>({
    poolId: "",
    pageSize: 10,
    pageNum: 2,
    order: "1",
    type: "time",
})
const changeTop = (flag:number) => { //传1表示点的是我参与的，传2表示点的是全部活动
    if(nowLeft.value === "1.25333rem" && flag === 2){
        nowLeft.value = "4.64rem";
        activityList.length = 0;
        let len = rightList.length;
        for(let i=0;i<len;i++){
            activityList.push(rightList[i]);
        }
    }else if(nowLeft.value === "4.64rem" && flag === 1){
        nowLeft.value = "1.25333rem";
        activityList.length = 0;
        let len = leftList.length;
        for(let i=0;i<len;i++){
            activityList.push(leftList[i]);
        }
    }
}
const goIntoPool = (state:number,participated:number) => {
    if(state == 1 || (state==4 && participated==1)){  //进行中的活动和已结束但是用户参加过的活动可以进入
        router.push({ //用于测试暂时更换为直接跳到活动页
            name: 'offiactivity',
            query: {
                poolId: publicCapsual.poolId,
            }
        })
    }
}
const returnLast = () => {
    router.go(-1);
}
onMounted(() => {
    let loading = ElLoading.service(options);
    getAllPoolInfo(poolInfo).then((res:any) => {
        console.log(res);
        let len = res.result.length;
        for(let i=0;i<len;i++){
            rightList.push(res.result[i]);
            rightList[i].startTime = rightList[i].startTime.slice(0,10);
            rightList[i].endTime = rightList[i].endTime.slice(0,10);
            if(res.result[i].participated){
                activityList.push(res.result[i]);
                let len = activityList.length;
                activityList[len-1].startTime = activityList[len-1].startTime.slice(0,10);
                activityList[len-1].endTime = activityList[len-1].endTime.slice(0,10);
            }
            if(res.result[i].participated){
                leftList.push(res.result[i]);
                let len = leftList.length;
                leftList[len-1].startTime = leftList[len-1].startTime.slice(0,10);
                leftList[len-1].endTime = leftList[len-1].endTime.slice(0,10);
            }
        }
        console.log(activityList);
        loading.close();
    })
})
</script>
<style>
    :root{
        --van-empty-description-color: white !important;
    }
</style>
<style lang="less" scoped>
    .root{
        height: 100%;
        background-color: #5ccdc8;
        display: flex;
        flex-direction: column;
        .return-wrapper {
            padding-top: 20px;
            padding-left: 20px;
            .return-icon {
                display: inline-block;
            }
        }
        .activity-list-top{
            position: relative;
            display: flex;
            justify-content: center;
            margin: 0px auto;
            width: 250px;
            top: 10px;
            .my-activity{
                font-size: 20px;
                color: white;
                font-weight: 500;
                margin-right: 22px;
            }
            .all-activity{
                font-size: 20px;
                color: white;
                font-weight: 500;
                transition: fontSize 0.7s;
                margin-left: 22px;
            }
            .decoration-line{
                position: absolute;
                background-color: white;
                width: 25px;
                height: 0px;
                border: 0.7px solid #FFFFFF;
                top: 100%;
                left: v-bind(nowLeft);  //1.25333rem,右边是4.64rem
                margin-top: 7px;
                transition: left 0.6s;
            }
        }
        .activity-list{
            height: 90%;
            margin-top: 20px;
            margin-bottom: 25px;
            overflow: scroll;
            .activity-cell{
                display: flex;
                flex-direction: column;
                width: 90%;
                margin: 0 auto;
                margin-top: 10px;
                height: 120px;
                border-radius: 10px;
                background-color: #fff;
                background: linear-gradient(to right bottom,rgba(255, 255, 255, 0.4),rgba(255, 255, 255, 0.2));
                z-index: 1;
                box-shadow: 0 0 1rem rgba(255, 255, 255, 0.1);
                .cell-top{
                    display: flex;
                    flex-grow: 1;
                    height: 50px;
                    .cell-title{
                        max-width: 70%;
                        height: 40px;
                        margin: 10px 10px 8px 10px;
                        color: #fff;
                        font-size: 16px;
                        line-height: 40px;
                        font-weight: bold;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                    }
                    .cell-tag{
                        display: flex;
                        width: 20%;
                        height: 25px;
                        margin: 17.5px 10px 8px 0;
                    }
                }
                .cell-middle{
                    height: 25px;
                    display: flex;
                    margin: 0px 10px 5px 10px;
                    .cell-participated{
                        font-size: 14px;
                        line-height: 25px;
                        color: white;
                    }
                }
                .cell-bottom{
                    height: 25px;
                    display: flex;
                    margin: 5px 10px 5px 10px;
                    .cell-time{
                        font-size: 13px;
                        line-height: 25px;
                        color: white;
                    }
                }
            }
            .activity-cell:hover{
                transform: scale(1.05);
            }
        }
        .empty-image{
            margin-top: 80px;
        }
    }
</style>